<!DOCTYPE html>
<!--<html lang="en" xmlns="http://www.w3.org/1999/xhtml">-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>DOM2和DOM3</title>
</head>
<body>
<h1>第十五章 使用Canvas绘图</h1>
<img src="../file/logo.png">
<br>
<canvas id="drawing" width="500" height="300">A drawing of something.</canvas>
<br>
<script type="x-webgl/x-vertex-shader" id="vertexShader">
attribute vec2 aVertexPosition;
void main() {
    gl_Position = vec4(aVertexPosition, 0.0, 1.0);
}


</script>
<script type="x-webgl/x-fragment-shader" id="fragmentShader">
#ifdef GL_ES
    precision mediump float;
#endif
uniform vec4 uColor;
void main() {
    gl_FragColor = uColor;
}


</script>
<button onclick="drawRect()">drawRect</button>
<button onclick="drawStrokeRect()">drawStrokeRect</button>
<button onclick="clearRect()">clearRect</button>
<button onclick="drawClock()">drawClock</button>
<button onclick="drawText()">drawText</button>
<button onclick="drawClock2()">drawClock2</button>
<button onclick="saveAndrestoreTest()">saveAndrestoreTest</button>
<button onclick="drawImage()">drawImage</button>
<button onclick="drawShadow()">drawShadow</button>
<button onclick="drawGradient()">drawGradient</button>
<button onclick="drawGradient2()">drawGradient2</button>
<button onclick="drawRadialGradient()">drawRadialGradient</button>
<button onclick="repeatTest()">repeatTest</button>
<button onclick="ImageTest()">ImageTest</button>
<button onclick="globalCompositeOperationTest()">globalCompositeOperationTest</button>
<button onclick="globalAlphaTest()">globalAlphaTest</button>
<button onclick="DataViewTest()">DataViewTest</button>
<button onclick="DataViewTest2()">DataViewTest2</button>
<button onclick="arrayTest()">arrayTest</button>
<button onclick="WebGLTest()">WebGLTest</button>
<button onclick="textureTest()">textureTest</button>
<script type="text/javascript" src="../js/ch15.js"></script>
</body>
</html>